<template>
	<div>
		<cl-drawer
			ref="drawer"
			:props="{
				title: '事件列表',
				appendToBody: true,
				size: '750px'
			}"
			@close="reset"
			:saving="saving"
		>
            <cl-crud ref="crud" @load="onLoad">
                <cl-pagefull>
                    <template #head>
                        <el-row type="flex">
                            <cl-flex1 />
                            <div>
                                <el-button icon="el-icon-plus" type="primary" @click="openForm(false)">
                                    新增事件
                                </el-button>
                            </div>
                        </el-row>
                    </template>
                    <el-row type="flex">
                        <cl-table v-bind="table">
                            <cl-empty slot="empty" />
                            <template #column-opt="{ scope: { row } }">
                                <div class="flex flex-align-center" style="justify-content: center;">
                                    <el-button type="primary" @click="openForm(true, row)"> 修改 </el-button>   
                                </div>
                            </template>
                        </cl-table>
                    </el-row>
                </cl-pagefull>
            </cl-crud>
            <event-form ref="form" @confirm="refresh()"></event-form>
		</cl-drawer>
	</div>
</template>
<script>

import eventForm from './event-form.vue';

export default {
	name: "servicer-event",
	components: {
        eventForm
	},
	data() {
		return {
			table: {
				"context-menu": ["refresh"],
				columns: [
					{
						type: "index",
						label: "#",
						width: 50,
						fixed: true
					},
					{
						label: "事件类型",
						prop: "event_type_name",
						minWidth: 80,
						align: "center",
						showOverflowTooltip: true
					},
					{ label: "消息模板", prop: "msg_title", width: 160 },
					{ label: "操作", prop: "opt", width: 240, fixed: "right" }
				]
			},
            search: {
                open_kfid: "",
                biz_id: ""
            }
		};
	},
	computed: {
	},
	created() {
		
	},
	methods: {
        onLoad({ ctx, app }) {
			ctx.service(this.$service.servicer)
            .set("dict", {
					api: {
						page: "eventList"
					}
				})
            .done();
			app.refresh(this.search);
		},
        refresh(reset = true) {
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
		},
		async open(data = {}) {
            this.search.open_kfid = data.open_kfid
            this.search.biz_id = data.biz_id
			this.$refs.drawer.create(async () => {
				// this.init();
			});
		},
		async init() {
		},
		async getDetail({ dept_id }) {
			
		},
        openForm(editing, row = {}) {
            if (editing) {
                row.biz_id = this.search.biz_id
                this.$refs.form.open(editing, row)
            }
            else {
                this.$refs.form.open(editing, { ...this.search })
            }
        },
		close() {
			this.$refs.drawer.close();
		},
		reset() {
		},
	}
};
</script>

<style lang="scss" scoped>

</style>
